<template>
	<el-tabs v-if="api" type="border-card" v-model="api.RequestTabValue" @tab-click="tabClick">
		<el-tab-pane v-for="(item,index) of api.Request" :key="index">
			<span slot="label" class="closeSpan" @dblclick="setTab(index)">
				<div>{{item.label}}</div>
				<i class="el-icon-close close" @click="removeTab(index)"></i>
			</span>
			<div class="datas">
				<datas :req="item"></datas>
				<module :req="item"></module>
			</div>
		</el-tab-pane>
		<el-tab-pane>
			<span slot="label"><i class="el-icon-plus"></i></span>
		</el-tab-pane>

	</el-tabs>
</template>

<script>
	import datas from './data.vue'
	import module from './module.vue'

	export default {
		name: '',
		components: {
			datas,
			module
		},
		props: {
			api: {
				type: Object
			}
		},
		model: ['api'],
		data() {
			return {

			}
		},
		methods: {
			tabClick(e) {
				if (this.api.Request.length == e.index) this.addTab(this.api.Request)
			},
			addTab(taps) {
				this.$prompt('New Tap', '添加', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then((el) => {
					let val = el.value ? this.$Trim(el.value) : ''
					if (val == '') {
						this.$message.error('空参数!')
						return
					}
					if (val.length > 15) {
						this.$message.error('名称过长!')
						return
					}
					for (let item of taps) {
						if (val == item.label) {
							this.$message.error('同名冲突！')
							return
						}
					}
					let tap = JSON.parse(JSON.stringify(this.$config.default_tap))
					tap.label = val
					taps.push(tap)
					this.api.RequestTabValue = val
				}).catch(() => {})
			},
			setTab(index) {
				this.$prompt('', 'tap重命名', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValue: this.api.Request[index].label,
					inputPattern: /\w{1,20}/,
					inputErrorMessage: '格式不正确'
				}).then(({
					value
				}) => {
					this.api.Request[index].label = value
				})
			},
			removeTab(index) {
				this.$confirm(`删除tap(${this.api.Request[index].label})?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.api.Request.splice(index, 1)
				})

			}
		},
		created() {

		}
	}
</script>

<style scoped="">
	.close {
		width: 0;
		overflow: hidden;
	}

	.closeSpan {
		display: flex;
		align-items: center;
	}

	.closeSpan:hover .close {
		width: 14px;
		overflow: visible;
	}

	.datas {
		display: flex;
		
	}
</style>
